<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片传输</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
        h1 { color: #333; }
        .upload-form { margin-bottom: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px; }
        .file-input { padding: 10px 20px; font-size: 16px; margin-right: 10px; }
        .submit-btn { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .submit-btn:hover { background-color: #45a049; }
        .image-grid { display: grid; grid-template-columns: repeat(auto-fill, 200px); gap: 10px; margin-top: 20px; }
        .image-item { text-align: center; padding: 10px; background-color: #f9f9f9; border-radius: 4px; }
        .image-preview { max-width: 100%; max-height: 150px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; }
        .image-name { margin: 5px 0; word-break: break-all; font-size: 14px; }
    </style>
</head>
<body>
    <h1>图片传输</h1>
    <div class="upload-form">
        <form method="POST" enctype="multipart/form-data">
            <input type="file" name="images" accept="image/*" multiple class="file-input">
            <input type="submit" value="上传图片" class="submit-btn">
        </form>
    </div>
    <hr>
    <h3>已上传图片</h3>
    <div class="image-grid">
        {{image_grid}}
    </div>
</body>
</html>
